<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>BONC简历操作中心</title>

<link href="${request.contextpath}/css/jquery.qtip.min.css" rel="stylesheet" />
<link href="${request.contextpath}/css/style.css" rel="stylesheet" />
 
<%-- <link rel="stylesheet" href="${request.contextpath}/css/demo.css" type="text/css"> --%>
<%-- <link rel="stylesheet" href="${request.contextpath}/css/zTreeStyle.css" type="text/css"> --%>
<link rel="stylesheet" href="${request.contextpath}/css/basicPage/relationalView.css" type="text/css">
 
<jsp:include page="import.jsp"/>

<script src="${request.contextpath}/js/cytoscape.min.js"></script>
<script src="${request.contextpath}/js/jquery.qtip.js"></script>
 
<script src="${request.contextpath}/js/cytoscape-qtip.js"></script>
 
<script src="${request.contextpath}/js/cytoscape-cose-bilkent.js"></script>
<!-- 树图 -->
<%-- <script type="text/javascript" src="${request.contextpath}/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${request.contextpath}/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${request.contextpath}/js/jquery.ztree.exedit.js"></script> --%>

<script type="text/javascript" src="${request.contextpath}/js/rmsFunction/relationalView.js"></script>



<script type="text/javascript">

$(function() { // on dom ready
	
	<%Map<String, List<Map<String, Object>>> sessionmap = (Map<String, List<Map<String, Object>>>) session
					.getAttribute("relationSchemaMap");
			ArrayList<Map<String, Object>> arraylist = (ArrayList<Map<String, Object>>) sessionmap
					.get("origin");
			Map<String, Object> map = (Map<String, Object>) arraylist.get(0);
			//把 学校分开
			String s = map.get("education").toString();
			List<String> list = new ArrayList<String>();
			String[] newstr = s.split(" ");
			// for(int i =0;i<newstr.length;i++){
			//list.add(newstr[i]);
			// System.out.println(newstr[i]);
			// } 

			//把 公司分开
			String sCompany = map.get("company").toString();
			List<String> listCompany = new ArrayList<String>();
			String[] newstrCompany = sCompany.split(" ");
			// for(int i =0;i<newstrcompany.length;i++){
			//list.add(newstr[i]);
			//	 System.out.println(newstrcompany[i]);
			// }%>

	var elesJson = {
		nodes: [ 
			{data: {id: '<%=map.get("id")%>', name: '<%=map.get("name")%>', width: 10, height: 10, img1:'people.png', color: '#e8aa8f',sign:'people'}, position: {x: 200, y: 400}},
		 
			<%for (int i = 0; i < newstrCompany.length; i++) {
				//list.add(newstr[i]);%>{data: {id: '<%=newstrCompany[i]%>', name: '<%=newstrCompany[i]%>', width: 10, height: 10, color: '#BFEFFF',sign:'company'}},
			<%}%>
			
			<%for (int i = 0; i < newstr.length; i++) {
				//list.add(newstr[i]);%>{data: {id: '<%=newstr[i]%>', name: '<%=newstr[i]%>', width: 10, height: 10, color: '#99CCFF',sign:'education'}},
				<%}%>
			],

		edges: [
				  
			<%for (int i = 0; i < newstrCompany.length; i++) {
				//list.add(newstr[i]);%> {data: {id: '<%=map.get("name")%>+<%=newstrCompany[i]%>', name: '', width: 1, color: '#FAA755', source: '<%=newstrCompany[i]%>', target: '<%=map.get("id")%>'}},
				<%}%>
				<%for (int i = 0; i < newstr.length; i++) {
				//list.add(newstr[i]);%> {data: {id: '<%=map.get("name")%>+<%=newstr[i]%>', name: '', width: 1, color: '#FAA755', source: '<%=newstr[i]%>', target: '<%=map.get("id")%>'}},
					<%}%>
			 
			]
	};

	cy = cytoscape({
		container: $("#cy"),
		
		style: cytoscape.stylesheet().selector("[sign='people']").css({
			'content': 'data(name)',
			'text-valign': 'left',
//			'background-color': '#ff0000',
			'background-color': 'data(color)',
			'width': 10,
			'height': 10,
			//'height': 'data(height)',
			'font-size':'4px',
			'background-fit': 'cover',
			'background-image': 'people.png'
		}).selector("[sign='company']").css({
			'content': 'data(name)',
			'text-valign': 'left',
//			'background-color': '#ff0000',
			'background-color': 'data(color)',
			'width': 10,
			'height': 10,
			//'height': 'data(height)',
			'font-size':'4px',
			'background-fit': 'cover',
			'background-image': 'company.png',
		}).selector("[sign='education']").css({
			'content': 'data(name)',
			'text-valign': 'left',
//			'background-color': '#ff0000',
			'background-color': 'data(color)',
			'width': 10,
			'height': 10,
			//'height': 'data(height)',
			'font-size':'4px',
			'background-fit': 'cover',
			'background-image': 'education.png',
		}).selector('edge').css({
			'width': 'data(width)',
			'line-color': 'data(color)',
			'target-arrow-color': '#F2B1BA',
			'target-arrow-shape': 'circle',
			'opacity': 0.8,
		}).selector(':selected').css({
			'background-color': '#00ff00',
			'line-color': 'black',
			'target-arrow-color': 'yellow',
			'source-arrow-color': 'black',
			'opacity': 0.5,
		}).selector('.faded').css({
			'opacity': 0.25,
			'text-opacity': 1,
		}),
		  zoom: 3,
		  pan: { x: 0, y: 0, },

		  // interaction options:
		  minZoom: 1,
		  maxZoom: 9,
		elements: elesJson,

		layout: {
			name: 'cose-bilkent', //circle, cose-bilkent
			 
			padding: 150,
		},

		ready: function() {
			// ready 1  
		}
	});
	
	
/*
	cy.on('tap', 'node[id = "a"]', function(evt) {
		// alert("hi~");
		 addNode();
	});
	
	cy.on('tap', 'node[id = "b"]', function(){
	  try {
	    window.open( this.data('href') );
	  } catch(e){
	    window.location.href = this.data('href'); 
	  } 
	});
*/	

/**
 * 显示右键导航栏的方法
 */
cy.on('cxttap', 'node', function(evt) {
	$("#oneSpot").attr("value",evt.cyTarget.id());
	alert("获得此节点");
		 cy.nodes().qtip({
			  content: '内容',
			  position: {
			    my: 'left center',
			    at: 'right center'
			  },
			  style: {
			    classes: 'qtip-bootstrap',
			    tip: {
			      width: 8,
			      height: 16
			    }
			  }
			});

});  

 	cy.on('tap', 'node', function(evt) {
 		$("#oneSpot").attr("value",evt.cyTarget.id());
		tapNode(evt);
	});  

}); // on dom ready


</script>


<SCRIPT type="text/javascript">
		<!--
		var setting = {
			 
				data: {
				/* 	keep: {
						parent:true,
						leaf:true
					}, */
					simpleData: {
						enable: true
					}
				},
			async: {
				enable: true
			},
			
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false,
				dblClickExpand: false,
				//showLine: false
			},
			edit: {
				drag: {
					autoExpandTrigger: true,
					prev: dropPrev,
					inner: dropInner,
					next: dropNext
				},
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename,
				// 拖拽
				//beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,
				beforeDragOpen: beforeDragOpen,
				onDrag: onDrag,
				onDrop: onDrop,
				onExpand: onExpand,
				// 单点
				beforeExpand: beforeExpand,
				//onExpand: onExpand,
				onClick: onClick
			}
			/* callback: {
				beforeDrag: beforeDrag,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove
			} */
		
		};
		 
				
			 
		var zNodes =[
	
					
			{ id:'<%=map.get("id")%>', pId:0, name:'<%=map.get("name")%>', open:true},
			
			<%for (int i = 0; i < newstrCompany.length; i++) {%>
			/* , isParent:true */
				{ id:'<%=newstrCompany[i]%>', pId:'<%=map.get("id")%>', name:'<%=newstrCompany[i]%>'},
			<%}%>
			<%for (int i = 0; i < newstr.length; i++) {%>
			/* , isParent:true */
				{ id:'<%=newstr[i]%>', pId:'<%=map.get("id")%>', name:'<%=newstr[i]%>'},
				<%}%>
		
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#zTree"), setting, zNodes);
		});
		
		
		
		
		/*============================== 编辑 功能    增加 删除 命名 ================================ */
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				};
			}, 0);
			return false;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("zTree");
					zTree.cancelEditName();
					alert("节点名称不能为空.");
				}, 0);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
		}
		function showRemoveBtn(treeId, treeNode) {
			return !treeNode.isFirstNode;
		}
		function showRenameBtn(treeId, treeNode) {
			return !treeNode.isLastNode;
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("zTree");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		}
		
		/* ============================= 拖拽 功能  =============================================*/
		
		function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					};
				};
			}
			return true;
		}
		function dropInner(treeId, nodes, targetNode) {
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					};
				};
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					};
				};
			}
			return true;
		}

		var log, className = "dark", curDragNodes, autoExpandNode;
		function beforeDrag(treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					curDragNodes = null;
					return false;
				} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
					curDragNodes = null;
					return false;
				};
			}
			curDragNodes = treeNodes;
			return true;
		}
		function beforeDragOpen(treeId, treeNode) {
			autoExpandNode = treeNode;
			return true;
		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"));
			return true;
		}
		function onDrag(event, treeId, treeNodes) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrag ]&nbsp;&nbsp;&nbsp;&nbsp; drag: " + treeNodes.length + " nodes." );
		}
		function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" onDrop ]&nbsp;&nbsp;&nbsp;&nbsp; moveType:" + moveType);
			showLog("target: " + (targetNode ? targetNode.name : "root") + "  -- is "+ (isCopy==null? "cancel" : isCopy ? "copy" : "move"));
		}
		function onExpand(event, treeId, treeNode) {
			if (treeNode === autoExpandNode) {
				className = (className === "dark" ? "":"dark");
				showLog("[ "+getTime()+" onExpand ]&nbsp;&nbsp;&nbsp;&nbsp;" + treeNode.name);
			}
		}

	/* 	function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		} */
		
		
		/* function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		} */
		 
		function setTrigger() {
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			zTree.setting.edit.drag.autoExpandTrigger = $("#callbackTrigger").attr("checked");
		}
		
		
		/* ========================== 点击 只显示一个展开   ，其他都关闭 ============================*/
		
		var curExpandNode = null;
		function beforeExpand(treeId, treeNode) {
			var pNode = curExpandNode ? curExpandNode.getParentNode():null;
			var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
				if (treeNode !== treeNodeP.children[i]) {
					zTree.expandNode(treeNodeP.children[i], false);
				};
			}
			while (pNode) {
				if (pNode === treeNode) {
					break;
				}
				pNode = pNode.getParentNode();
			}
			if (!pNode) {
				singlePath(treeNode);
			};

		}
		function singlePath(newNode) {
			if (newNode === curExpandNode) return;

            var zTree = $.fn.zTree.getZTreeObj("zTree"),
                    rootNodes, tmpRoot, tmpTId, i, j, n;

            if (!curExpandNode) {
                tmpRoot = newNode;
                while (tmpRoot) {
                    tmpTId = tmpRoot.tId;
                    tmpRoot = tmpRoot.getParentNode();
                }
                rootNodes = zTree.getNodes();
                for (i=0, j=rootNodes.length; i<j; i++) {
                    n = rootNodes[i];
                    if (n.tId != tmpTId) {
                        zTree.expandNode(n, false);
                    };
                };
            } else if (curExpandNode && curExpandNode.open) {
				if (newNode.parentTId === curExpandNode.parentTId) {
					zTree.expandNode(curExpandNode, false);
				} else {
					var newParents = [];
					while (newNode) {
						newNode = newNode.getParentNode();
						if (newNode === curExpandNode) {
							newParents = null;
							break;
						} else if (newNode) {
							newParents.push(newNode);
						};
					}
					if (newParents!=null) {
						var oldNode = curExpandNode;
						var oldParents = [];
						while (oldNode) {
							oldNode = oldNode.getParentNode();
							if (oldNode) {
								oldParents.push(oldNode);
							};
						}
						if (newParents.length>0) {
							zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
						} else {
							zTree.expandNode(oldParents[oldParents.length-1], false);
						};
					};
				};
			}
			curExpandNode = newNode;
		}

		function onExpand(event, treeId, treeNode) {
			curExpandNode = treeNode;
		}

		function onClick(e,treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("zTree");
			zTree.expandNode(treeNode, null, null, null, true);
		}
		
		
		
		
		$(document).ready(function(){
			$.fn.zTree.init($("#zTree"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});
		
		
		
		//-->
	</SCRIPT>

</head>

<body id="bg">
	<input type="hidden" name="oneSpot" id="oneSpot" value="" />
	<input type="hidden" name="twoSpot" id="twoSpot" value="" />
	<div style="text-align: center;">
		<jsp:include page="head.jsp"></jsp:include>
	</div>
	 <div class="container content_wrap">
		<div class="zTreeDemoBackground right" style="width: 100%;">
				<ul id="zTree" class="ztree"></ul>
			</div>
 	</div>
			 
	<div id="cy" style="font-size: 10px;width: 80%;"></div>

</body>

</html>